<template>
    <div style="width: 100%;text-align: right;margin-top: 20px">
        <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="pageSizes"
                :page-size="pageSize"
                :total="totalCount"
                layout="total,sizes,prev,pager,next,jumper">
        </el-pagination>
    </div>
</template>
<script>
    export default {
        name: "pager",
        data:function(){
            return {
                pageNum:1,
                pageSize:10,
                totalCount : 0,
                currentPage : 1,
                pageSizes:[]
            }
        },
        props:{
            requestParams:Object,//参数
            requestUrl:{}
        },
        mounted:function(){
            this.loadData();
        },
        methods:{
            doFlush(){
                this.pageNum=1;
                this.pageSize=10;
                if(this.currentPage === 1){
                    this.totalCount=0;
                    this.loadData();
                }else{
                    this.currentPage=1;
                    this.totalCount=0;
                }
                /*this.totalCount=0;
                this.currentPage=1;
                this.loadData();*/
            },
//            请求数据
            loadData(){
                var self = this;
                var obj = {page:self.pageNum,rows:self.pageSize};
                    this.requestUrl(Object.assign(obj,self.requestParams)).then(function(res){
                        console.log(res)
                        if(res.response.searchData){
                            self.totalCount = res.response.totalNum;
                            if(self.totalCount > 10){
                                self.pageSizes = [10,20,50];
                            }else{
                                self.pageSizes = [10];
                            }
                            self.$emit('listenPagerEvent',res.response.searchData,self.pageSize,self.pageNum)
                        }else{
                            self.$emit('listenPagerEvent',[],self.pageSize,self.pageNum);
                        }
                })
            },
            handleCurrentChange(val){
                this.pageNum = val;
                this.currentPage = val;
                this.loadData();
            },
            handleSizeChange(val){
                this.pageSize = val;
                this.pageNum = 1;
                if(this.currentPage === 1){
                    this.loadData();
                }else{
                    this.currentPage = 1;
                }

            }
        },
        watch:{
            //被选中的菜单变化时
            orgId(val, oldVal){
                if(val != oldVal){
                    this.loadData();
                }
            },
            //状态
            'requestParams.usable':function(val,oldVal){
                if(val != oldVal){
                    this.loadData();
                }
            },
            //岗位
            'requestParams.stationId':function(val,oldVal){
                if(val != oldVal){
                    this.loadData();
                }
            },
            //电话
            'requestParams.tel':function(val,oldVal){
                if(val != oldVal){
                    this.loadData();
                }
            },
            //姓名
            'requestParams.userName':function(val,oldVal){
                if(val != oldVal){
                    this.loadData();
                }
            },
            'requestParams.reload':function(val,oldVal){
                this.loadData();
            },
            'requestParams.keywords':function(val,oldVal){
                this.loadData();
            }
        },
        computed: {
            orgId() {
        　　　　return this.requestParams.orgId;
        　　}
        }
    }
</script>

<style scoped>

</style>